<template>
  <view class="policyDetails" id="policyDetails">
    <view class="policyDetails_top">
      <image
        src="../../static/heireturn.png"
        mode=""
        @tap="navigateBackEv()"
      ></image>
      <h3>详情</h3>
    </view>
    <view class="policyDetails_title">
      {{ detailsData.title }}
    </view>
    <view class="policyDetails_subscribe">
      <view class="policyDetails_subscribe_left">
        来源：{{ detailsData.departmentName }}
      </view>
      <view
        class="policyDetails_subscribe_right"
        v-show="detailsData.whetherAttention == 0"
        @tap="subscribe(detailsData.departmentId)"
      >
        <image src="../../static/plus.png" mode=""></image>
        <text>订阅</text>
      </view>
      <view
        class="policyDetails_subscribe_rightAlready"
        v-show="detailsData.whetherAttention == 1"
        @tap="cancelSubscribe(detailsData.departmentId)"
      >
        <text>已订阅</text>
      </view>
    </view>
    <view class="policyDetails_more">
      <view class="policyDetails_more_left">
        日期：{{ detailsData.releaseTime }}
      </view>
      <view class="policyDetails_more_content"> 订阅更多 </view>
    </view>
    <view class="policyDetails_content" v-html="detailsData.content"> </view>
    <view class="policyDetails_bottom">
      <view
        class="policyDetails_bottom_left"
        v-if="
          detailsData.pageViewCount != '' && detailsData.pageViewCount != null
        "
        >阅读量：{{ detailsData.pageViewCount }}</view
      >
      <view class="policyDetails_bottom_left" v-else>阅读量：0</view>
      <view class="policyDetails_bottom_content">
        <text>分享至</text>
        <image src="../../static/WeChat.png" mode=""></image>
      </view>
      <view class="policyDetails_bottom_right">
        <a :href="detailsData.link" v-if="whether">阅读原文</a>
      </view>
    </view>
    <view class="policyDetails_frame"></view>
    <Festival></Festival>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 详情数据
      detailsData: "",
      // 阅读原文是展示
      whether: false,
    };
  },
  onLoad(data) {
    var that = this;
    that
      .$get("/bmj-api/api/pms/pmsPolicyNoticeInfo/getPolicyNoticeInfo", {
        id: data.id,
      })
      .then((res) => {
        if (res.success) {
          that.detailsData = res.result;
          if (res.result.link.indexOf("http") != -1) {
            that.whether = true;
          } else {
            that.whether = false;
          }
        }
      });
  },
  methods: {
    // 返回上一级
    navigateBackEv() {
      window.history.go(-1);
    },
    // 订阅
    subscribe(id) {},
    // 取消订阅
    cancelSubscribe(id) {},
  },
};
</script>

<style lang="less" scoped>
.policyDetails {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}
.policyDetails_top {
  width: 100%;
  height: 88rpx;
  overflow: hidden;
  position: relative;
}
.policyDetails_top > image {
  width: 18rpx;
  height: 34rpx;
  position: absolute;
  left: 4rpx;
  top: 0;
  padding: 27rpx 30rpx;
  box-sizing: content-box;
}
.policyDetails_top > h3 {
  line-height: 88rpx;
  text-align: center;
  width: 100%;
  height: 100%;
  font-weight: 400;
  color: #000;
  font-size: 34rpx;
}
.policyDetails_title {
  margin: 30rpx 30rpx;
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
}
.policyDetails_subscribe {
  overflow: hidden;
  margin: 30rpx 30rpx;
  background-color: #f8f8f8;
}
.policyDetails_subscribe_left {
  float: left;
  margin: 22rpx 20rpx;
  width: 510rpx;
  font-size: 26rpx;
  line-height: 36rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.policyDetails_subscribe_right {
  float: left;
  width: 120rpx;
  height: 48rpx;
  margin: 16rpx 0;
  background-color: #1678ff;
  border-radius: 9rpx;
  overflow: hidden;
}
.policyDetails_subscribe_right > image {
  width: 16rpx;
  height: 16rpx;
  margin: 16rpx 14rpx 16rpx 24rpx;
  float: left;
}
.policyDetails_subscribe_right > text {
  float: left;
  font-size: 22rpx;
  line-height: 32rpx;
  color: #fff;
  margin: 8rpx 0;
}
.policyDetails_subscribe_rightAlready {
  float: left;
  width: 120rpx;
  height: 48rpx;
  font-size: 22rpx;
  line-height: 48rpx;
  text-align: center;
  margin: 16rpx 0;
  background-color: #cbdce8;
  border-radius: 9rpx;
  overflow: hidden;
  color: #fff;
}
.policyDetails_more {
  margin: 0 30rpx;
  overflow: hidden;
}
.policyDetails_more_left {
  margin: 14rpx 0;
  color: #aaa;
  font-size: 22rpx;
  height: 32rpx;
  line-height: 32rpx;
  float: left;
}
.policyDetails_more_content {
  margin: 14rpx 0;
  color: #ff7648;
  font-size: 22rpx;
  height: 32rpx;
  line-height: 32rpx;
  float: left;
  margin-left: 20rpx;
}
.policyDetails_content {
  margin: 40rpx 30rpx 0 30rpx;
}
.policyDetails_bottom {
  overflow: hidden;
  margin: 40rpx 30rpx 60rpx 30rpx;
}
.policyDetails_bottom_left {
  float: left;
  font-size: 28rpx;
  line-height: 40rpx;
  height: 40rpx;
  color: #aaa;
  font-weight: 400;
}
.policyDetails_bottom_content {
  float: left;
  margin-left: 40rpx;
}
.policyDetails_bottom_content > text {
  display: inline-block;
  float: left;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #aaa;
}
.policyDetails_bottom_content > image {
  float: left;
  width: 36rpx;
  height: 30rpx;
  margin: 5rpx 0 5rpx 20rpx;
}
.policyDetails_bottom_right {
  float: right;
  height: 40rpx;
  overflow: hidden;
}
.policyDetails_bottom_right > a {
  float: left;
  display: inline-block;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #1678ff;
}
.policyDetails_frame {
  margin: 0 30rpx;
  height: 2rpx;
  background: #ebebeb;
}
.policyDetails_businesscard {
  margin: 60rpx 30rpx 150rpx 30rpx;
  height: 335rpx;
  background: url(../../static/policy/businesscard_bg.png) 0 0 no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.policyDetails_businesscard_top {
  margin: 40rpx 40rpx 8rpx 60rpx;
  overflow: hidden;
}
.policyDetails_businesscard_top_left {
  float: left;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
}
.policyDetails_businesscard_top_left > image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.policyDetails_businesscard_top_content {
  float: left;
  width: 454rpx;
  padding: 20rpx 20rpx 0 20rpx;
  box-sizing: border-box;
}
.policyDetails_businesscard_top_content_top {
  overflow: hidden;
}
.policyDetails_businesscard_top_content_top > text {
  float: left;
  display: inline-block;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 32rpx;
  color: #1678ff;
  font-weight: 700;
}
.policyDetails_businesscard_top_content_top > p {
  float: left;
  margin-left: 20rpx;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 700;
}
.policyDetails_businesscard_top_content_bottom {
  height: 34rpx;
  line-height: 34rpx;
  font-size: 24rpx;
  color: #aaa;
  margin-top: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.policyDetails_businesscard_top_right {
  float: left;
  width: 16rpx;
  height: 120rpx;
  position: relative;
}
.policyDetails_businesscard_top_right > image {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16rpx;
  height: 24rpx;
}
.policyDetails_businesscard_content {
  margin: 8rpx 40rpx 8rpx 60rpx;
  height: 48rpx;
  line-height: 48rpx;
  font-size: 24rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
